<!doctype html>
<html lang="zh">
<head>
	<meta charset="utf-8" />
	<title>Colour</title>
	<script>/*
	<div>
		<input type="color" id="bga" value="#111111" onkeyup="" />
		<button onclick="bgd()">Use Down</button>
		<br />
		<input type="text" id="bgb" value="111111" onkeyup="" />
		<p id="bg">#111111</p>
	</div>
	<div>
		<input type="color" id="txa" value="#00ffff" onkeyup="" />
		<button onclick="txd()">Use Down</button>
		<br />
		<input type="text" id="txb" value="00ffff" onkeyup="" />
		<p id="bg">#00ffff</p>
	</div>
	<br />
	<p></p>
	<button onclick="run()">Using Setting</button>
*/

function i(a) {
	return(document.getElementById(a));
}

function bgd() {
	var a = i("bgb").value;
	a = nd(a);
	i("bga").value = "#" + a;
}

function txd() {
	var a = i("txb").value;
	a =nd(a);
	i("txa").value = "#" + a;
}

function run() {
	var bg = i("bga").value;
	var tx = i("txa").value;
	document.body.style.background = bg;
	i("bg").innerHTML = bg;
	i("tx").innerHTML = tx;
	document.querySelector(":root").style.setProperty("--tx", tx);
}

function nd(a){
	var c = d = [];
	var b = 0;
	c = a.split("");
	if (c.length <= 4) {
		while (b < c.length) {
			d.push(c[b]);
			d.push(c[b]);
			b += 1;
		}
		c = d; 
	}
	return("" + c.join(""));
}</script>
	<style>:root
{
	--tx: #0ff;
}

body {
	background-color: #111;

}

body > div {
	
}

body button {
	border: 0;
	background-color: #0000;
	color: var(--tx);
}

body > botton:hover
{
	color: #0f0;
}

body > div > input {
	border: 0;
	border-radius: 0;
	border-bottom: solid 1px var(--tx);
	background: #0000;
	color: var(--tx);
	transition: 0.5s
}

body > div {
	border: solid 2px var(--tx);
	float: left;
	position: relative;
	border-radius: 10px;
}

body > div > p {
	color: var(--tx);
}



body > div > input[type="color"] {
	border: 0;
}

input[type="text"]:focus
{
	border-radius: 10px;
	background-color: #7773;
}</style>
	<!--script src="./a.js"></script>
	<!--link rel="stylesheet" href="./a.css" />
	<!--link rel="icon" href="./a.png" /-->
</head>
<body>
	<!---->
	<div>
		<input type="color" id="bga" value="#111111" onkeyup="" />
		<button onclick="bgd()">Use Down</button>
		<br />
		<input type="text" id="bgb" value="111111" onkeyup="" />
		<p id="bg">#111111</p>
	</div>
	<div>
		<input type="color" id="txa" value="#00ffff" onkeyup="" />
		<button onclick="txd()">Use Down</button>
		<br />
		<input type="text" id="txb" value="00ffff" onkeyup="" />
		<p id="tx">#00ffff</p>
	</div>
	<br />
	<p></p>
	<button onclick="run()">Using Setting</button>
</body>
</html>